<template>
  <div class="index">
    <div class="page-top">
      衢江区商品市场综合智治平台
    </div>
    <div class="index-main">
      <div class="index-section left-top">
        <div class="index-section-title" style="cursor:pointer;" @click="nextPage('/partyBuilding')">
          党建统领
        </div>
        <div class="party-construction">
          <div class="group-info">
            <div class="group-info-left">
              党支部 <span>4个</span>
              <br>
              党员数量 <span>139个</span>
              <br>
              本月组织活动 <span>30个</span>
            </div>
            <div class="group-info-right">
              <div class="group-info-right-title">
                组织活动
              </div>
              <div class="group-info-right-img">
                <img src="../assets/images/temp/dzb.jpeg" style="width: 100%;height: 100%;" alt="">
                <div class="img-sin">联合党支部</div>
              </div>
            </div>
          </div>
          <div class="section-sub-title">
            组织架构
          </div>
          <div class="change-btns">
            <div class="change-btns-item" :class="{'change-btns-selected': zzjgBtnIndex === 1}" @click="zzjgChange(1)">联合党支部</div>
            <div class="change-btns-item" :class="{'change-btns-selected': zzjgBtnIndex === 2}" @click="zzjgChange(2)">企业党支部</div>
            <div class="change-btns-item" :class="{'change-btns-selected': zzjgBtnIndex === 3}" @click="zzjgChange(3)">经营党支部</div>
            <div class="change-btns-item" :class="{'change-btns-selected': zzjgBtnIndex === 4}" @click="zzjgChange(4)">新联会</div>
            <div class="detail">详情</div>
          </div>
          <div class="zzjg-list-title">
            <div class="zzjg-list-title-item" style="width: 25%;">姓名</div>
            <div class="zzjg-list-title-item" style="width: 25%;">职务</div>
            <div class="zzjg-list-title-item" style="width: 50%;">分工</div>
          </div>
          <div class="zzjg-list-box">
            <vue-seamless-scroll
                :data="zzjgListData"
                class="seamless-warp"
                :class-option="classOption">
              <div v-for="(item, index) in zzjgListData" :key="index" class="zzjg-list-box-item">
                <div class="item-section" style="width: 25%;">{{item.name}}</div>
                <div class="item-section" style="width: 25%;">{{item.job}}</div>
                <div class="item-section" style="width: 50%;">{{item.work}}</div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="index-section left-bottom">
        <div class="index-section-title" style="cursor:pointer;" @click="nextPage('/marketSafety')">
          市场安全
        </div>
        <div class="change-btns-big">
          <div class="change-btns-big-item" style="width: 163px;" :class="{'change-btns-big-selected': marketSafeBtnIndex === 1}" @click="marketSafeBtnChange(1)">疫情防控</div>
          <div class="change-btns-big-item" style="width: 163px;" :class="{'change-btns-big-selected': marketSafeBtnIndex === 2}" @click="marketSafeBtnChange(2)">食品安全</div>
          <div class="change-btns-big-item" style="width: 163px;" :class="{'change-btns-big-selected': marketSafeBtnIndex === 3}" @click="marketSafeBtnChange(3)">消防安全</div>
        </div>
        <div class="yqfk" v-show="marketSafeBtnIndex === 1">
          <div class="yqfk-section1">
            <div class="yqfk-section1-img">衢通码</div>
            <div class="yqfk-section1-text">
              扫码 &nbsp;&nbsp;<span style="font-size: 22px;color: #00F6FF">1837次</span> &nbsp;&nbsp;<span style="color: #00FF9D;font-size: 20px">↓</span>&nbsp;&nbsp;<span style="color: #00FF9D">23.5%</span><br>
              衢通码异常 &nbsp;&nbsp;<span style="font-size: 22px;color: #00F6FF">12次</span> &nbsp;&nbsp;<span style="color: #FF0000;font-size: 20px">↑</span>&nbsp;&nbsp;<span style="color: #FF0000">23.5%</span>
            </div>
          </div>
          <div class="yqfk-section2">
            <div class="yqfk-section2-img"><img src="../assets/images/temp/car.jpeg" style="width: 100%;height: 100%;" alt=""></div>
            <div class="yqfk-section2-text">
              <span style="font-size: 18px;color: #00F6FF">进出车辆</span><br>
              <span style="font-size: 22px">进</span> &nbsp;&nbsp;<span style="font-size: 22px;color: #00F6FF">100</span> &nbsp;&nbsp;<span style="color: #00FF9D;font-size: 20px">↓</span>&nbsp;&nbsp;<span style="color: #00FF9D">23.5%</span><br>
              <span style="font-size: 22px">出</span> &nbsp;&nbsp;<span style="font-size: 22px;color: #00F6FF">10</span> &nbsp;&nbsp;<span style="color: #FF0000;font-size: 20px">↑</span>&nbsp;&nbsp;<span style="color: #FF0000">23.5%</span>
            </div>
          </div>
          <div class="index-left-bottom-anm1">
            <vue-seamless-scroll
                :data="carListData"
                class="index-left-bottom-anm1"
                :class-option="classOption1">
              <div class="yqfk-section3"  style="display: inline-block;" v-for="(item, index) in carListData" :key="index">
                <div class="yqfk-section3-item">
                  <div class="item-title">车牌号：</div>
                  <div class="item-text" style="width: 90px;">{{ item.carCard }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title">车辆类型：</div>
                  <div class="item-text" style="width: 50px;">{{ item.carType }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title" style="width: 90px;">车辆来源地：</div>
                  <div class="item-text" style="width: 100px;">{{ item.from }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title">司机姓名：</div>
                  <div class="item-text" style="width: 90px;">{{ item.name }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title">联系方式：</div>
                  <div class="item-text" style="width: 95px;">{{ item.tel }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title" style="width: 45px;">货物：</div>
                  <div class="item-text" style="width: 100px;">{{ item.goods }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title">入场时间：</div>
                  <div class="item-text" style="width: 150px;">{{ item.enterTime }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title">出场时间：</div>
                  <div class="item-text" style="width: 150px;">{{ item.leaveTime }}</div>
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
        <div class="spaq" v-if="marketSafeBtnIndex === 2">
          <div class="spaq-section1">
            <div class="spaq-section1-img">今日<br>检测</div>
            <div class="spaq-section1-text">
              检测商品数 &nbsp;&nbsp;<span style="font-size: 22px;color: #00F6FF">189件</span> &nbsp;&nbsp;<span style="color: #00FF9D;font-size: 20px">↓</span><br>
<!--              检测预警 &nbsp;&nbsp;<span style="font-size: 22px;color: #00F6FF">12次</span> &nbsp;&nbsp;<span style="color: #FF0000;font-size: 20px">↑</span>-->
              检测预警 &nbsp;&nbsp;<span style="font-size: 22px;color: #00F6FF">12次</span> &nbsp;&nbsp;<span style="color: #00FF9D;font-size: 20px">↓</span>
            </div>
          </div>
          <div class="spaq-section2">
            <div class="spaq-section2-item" style="margin-left: 78px;">
              <span style="color: #00F6FF;font-size: 28px">94%</span><span style="color: #00FF9D;font-size: 28px">↓</span><br>
              合格率
            </div>
            <div class="spaq-section2-item" style="margin-left: 78px;">
              <span style="color: #00F6FF;font-size: 28px">94%</span><span style="color: #00FF9D;font-size: 28px">↓</span><br>
              合格率
            </div>
          </div>
          <div class="left-bottom-anm2">
            <vue-seamless-scroll
                :data="goodsListData"
                class="wrap"
                :class-option="classOption2">
              <div class="spaq-section3" style="display: inline-block;width: 500px;" v-for="(item, index) in goodsListData" :key="index">
                <div class="spaq-section3-item">
                  <div class="item-title">商品：</div>
                  <div class="item-text" style="width: 90px;">{{ item.goods }}</div>
                </div>
                <div class="spaq-section3-item">
                  <div class="item-title">品种：</div>
                  <div class="item-text" style="width: 50px;">{{ item.kinds }}</div>
                </div>
                <div class="spaq-section3-item">
                  <div class="item-title" style="width: 90px;">检测批次：</div>
                  <div class="item-text" style="width: 100px;">{{ item.NO }}</div>
                </div>
                <div class="spaq-section3-item">
                  <div class="item-title">检测项目：</div>
                  <div class="item-text" style="width: 90px;">{{ item.item }}</div>
                </div>
                <div class="spaq-section3-item">
                  <div class="item-title">检测结果：</div>
                  <div class="item-text" style="width: 50px;">{{ item.result }}</div>
                </div>
                <div class="spaq-section3-item">
                  <div class="item-title" style="width: 90px;">经营户：</div>
                  <div class="item-text" style="width: 100px;">{{ item.operator }}</div>
                </div>
                <div class="spaq-section3-item">
                  <div class="item-title">供货时间：</div>
                  <div class="item-text" style="width: 150px;">{{ item.supTime }}</div>
                </div>
                <div class="spaq-section3-item">
                  <div class="item-title">检测时间：</div>
                  <div class="item-text" style="width: 150px;">{{ item.checkTime }}</div>
                </div>
                <div class="spaq-section3-item">
                  <div class="item-title">处置情况：</div>
                  <div class="item-text" style="width: 150px;">{{ item.isDeal }}</div>
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
        <div class="yqfk" v-if="marketSafeBtnIndex === 3">
          <div class="yqfk-section1">
            <div class="yqfk-section1-img" style="line-height: 1.25;box-sizing: border-box;padding-top: 30px;">消防<br>预警</div>
            <div class="yqfk-section1-text">
              消防设备 &nbsp;&nbsp;<span style="font-size: 22px;color: #00F6FF">1843件</span> <br>
              消防栓 &nbsp;&nbsp;<span style="font-size: 22px;color: #00F6FF">1000次</span>
            </div>
          </div>
          <div class="yqfk-section2">
            <div class="yqfk-section2-img"><img src="../assets/images/index/main_bg.png" style="width: 100%;height: 100%;" alt=""></div>
            <div class="yqfk-section2-text" style="padding-top: 40px;">
              预警次数 &nbsp;&nbsp;<span style="font-size: 22px;color: #00F6FF">90</span> &nbsp;&nbsp;<span style="color: #00FF9D;font-size: 20px">↓</span><br>
              处置次数 &nbsp;&nbsp;<span style="font-size: 22px;color: #00F6FF">90</span> &nbsp;&nbsp;<span style="color: #FF0000;font-size: 20px">↑</span>
            </div>
          </div>
          <div class="left-bottom-anm1">
            <vue-seamless-scroll
                :data="xfListData"
                class="wrap"
                :class-option="classOption3">
              <div class="yqfk-section3" style="display: inline-block" v-for="(item, index) in xfListData" :key="index">
                <div class="yqfk-section3-item">
                  <div class="item-title">区域：</div>
                  <div class="item-text" style="width: 90px;">{{ item.area }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title">设备位置：</div>
                  <div class="item-text" style="width: 50px;">{{ item.position }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title" style="width: 90px;">设备名称：</div>
                  <div class="item-text" style="width: 100px;">{{ item.sb }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title">预警信息：</div>
                  <div class="item-text" style="width: 90px;">{{ item.message }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title">预警时间：</div>
                  <div class="item-text" style="width: 150px;">{{ item.time }}</div>
                </div>
                <div class="yqfk-section3-item">
                  <div class="item-title">保质方法：</div>
                  <div class="item-text" style="width: 400px;">{{ item.methods }}</div>
                </div>
              </div>
            </vue-seamless-scroll>
          </div>
        </div>
      </div>
      <div class="index-center center-top">
        <div class="index-center-main">
          <div class="main-item"  @click="nextPage('/operatorInfo')">
            <div class="main-item-name">经营户（家）</div>
            <div class="main-item-num">356</div>
          </div>
          <div class="main-item">
            <div class="main-item-name">摊位（个）</div>
            <div class="main-item-num">400</div>
          </div>
          <div class="main-item">
            <div class="main-item-name">商品数（个）</div>
            <div class="main-item-num">4000</div>
          </div>
        </div>
        <div class="index-center-main">
          <div class="main-item">
            <div class="main-item-name">交易额（元）</div>
            <div class="main-item-num">400000</div>
          </div>
          <div class="main-item">
            <div class="main-item-name">交易量（千克）</div>
            <div class="main-item-num">4000</div>
          </div>
          <div class="main-item">
            <div class="main-item-name">交易数（次）</div>
            <div class="main-item-num">400</div>
          </div>
        </div>
        <div class="index-center-main">
          <div class="main-item">
            <div class="main-item-name">工作人员（人）</div>
            <div class="main-item-num">356</div>
          </div>
          <div class="main-item">
            <div class="main-item-name">网格（个）</div>
            <div class="main-item-num">400</div>
          </div>
          <div class="main-item">
            <div class="main-item-name">AI预警（次）</div>
            <div class="main-item-num">4000</div>
          </div>
        </div>
      </div>
      <div class="index-center center-bottom" style="display: flex;justify-content: space-between">
        <div class="center-bottom-item">
          <div class="item-title">安全指数</div>
          <div id="aqzs-radar" class="radar-chart-center"></div>
        </div>
        <div class="center-bottom-item">
          <div class="item-title">发展指数</div>
          <div id="fzzs-radar" class="radar-chart-center"></div>
        </div>
        <div class="center-bottom-item">
          <div class="item-title">共富指数</div>
          <div id="gfzs-radar" class="radar-chart-center"></div>
        </div>
      </div>
      <div class="index-section right-top">
        <div class="index-section-title" style="cursor:pointer;" @click="nextPage('/marketGovern')">
          市场治理
        </div>
        <div class="section-sub-title" style="margin-top: 10px;">
          案件办理
        </div>
        <div class="change-btns">
          <div class="change-btns-item" style="width: 112px;" :class="{'change-btns-selected': sczlBtnIndex === 1}" @click="sczlChange(1)">专属网格</div>
          <div class="change-btns-item" style="width: 112px;" :class="{'change-btns-selected': sczlBtnIndex === 2}" @click="sczlChange(2)">经营网格</div>
          <div class="change-btns-item" style="width: 112px;" :class="{'change-btns-selected': sczlBtnIndex === 3}" @click="sczlChange(3)">法律顾问</div>
          <div class="change-btns-item" style="width: 112px;" :class="{'change-btns-selected': sczlBtnIndex === 4}" @click="sczlChange(4)">共享法庭</div>
        </div>
        <div class="ajbl-content" v-if="sczlBtnIndex === 1">
          <div class="three-detail">
            <div class="three-detail-item">网格单元7个 &nbsp;&nbsp;<span style="font-size: 14px;color: #00F6FF">详情</span></div>
            <div class="three-detail-item">网格制度 &nbsp;&nbsp;<span style="font-size: 14px;color: #00F6FF">详情</span></div>
            <div class="three-detail-item">网格架构 &nbsp;&nbsp;<span style="font-size: 14px;color: #00F6FF">详情</span></div>
          </div>
          <div class="aj-title">
            <div class="aj-title-item" style="width: 22%;">事件协同数</div>
            <div class="aj-title-item" style="width: 22%;">已办结</div>
            <div class="aj-title-item" style="width: 22%;">办结中</div>
            <div class="aj-title-item" style="width: 22%;">办结率</div>
            <div class="aj-title-item" style="width: 12%;">详情</div>
          </div>
          <div class="aj-num">
            <div class="aj-num-item" style="width: 22%;">41</div>
            <div class="aj-num-item" style="width: 22%;">41</div>
            <div class="aj-num-item" style="width: 22%;">41</div>
            <div class="aj-num-item" style="width: 22%;">41</div>
            <div class="aj-num-item" style="width: 12%; color: #00F6FF">详情</div>
          </div>
        </div>
        <div class="ajbl-content" v-if="sczlBtnIndex !== 1">
          <div id="ajbl-line" style="width: 100%;height: 100%;"></div>
        </div>
        <div class="change-btns-big">
          <div class="change-btns-big-item" style="width: 245px;" :class="{'change-btns-big-selected': aiBtnIndex === 1}" @click="aiBtnChange(1)">AI预警</div>
          <div class="change-btns-big-item" style="width: 245px;" :class="{'change-btns-big-selected': aiBtnIndex === 2}" @click="aiBtnChange(2)">AI预警情况</div>
        </div>
        <div class="ai-content" v-if="aiBtnIndex === 1">
          <div id="ai-pie" style="float: left;width: 60%;height: 100%;"></div>
          <div class="ai-right">
            AI自动值守：<span style="color: #00F6FF">900路</span> <br>
            今日违规抓拍：<span style="color: #00F6FF">100次</span> <br>
            今日处置：<span style="color: #00F6FF">30次</span>
          </div>
        </div>
        <div class="ai-content" v-else>
          <div style="width: 100%;height: 100%;position: relative">
            <div class="left-bottom-anm3">
              <el-carousel
                  indicator-position="none"
                  :interval="5000"
                  height="150px">
                <el-carousel-item v-for="(item, index) in aiListData" :key="index">
                  <div class="ai-warn-box" style="display: inline-block;float: left;">
                    <img :src="item.url" style="float: left;width: 204px;height: 115px;margin-top: 16px;margin-left: 23px;" alt="">
                    <div class="ai-warn-intro">
                      <div class="ai-warn-intro-item" style="margin-top: 8px;">
                        <div class="item-title">经营户名称：</div>
                        <div class="item-text">{{ item.operator }}</div>
                      </div>
                      <div class="ai-warn-intro-item">
                        <div class="item-title">违规情况：</div>
                        <div class="item-text">{{ item.wg }}</div>
                      </div>
                      <div class="ai-warn-intro-item">
                        <div class="item-title">时间：</div>
                        <div class="item-text">{{ item.time }}</div>
                      </div>
                      <div class="ai-warn-intro-item">
                        <div class="item-title">处置情况：</div>
                        <div class="item-text">{{ item.result }}</div>
                      </div>
                      <div class="ai-warn-intro-item">
                        <div class="item-title">处置时间：</div>
                        <div class="item-text">{{ item.dealTime }}</div>
                      </div>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
      </div>
      <div class="index-section right-bottom">
        <div class="index-section-title" style="cursor:pointer;" @click="nextPage('/marketTrade')">
          市场交易
        </div>
        <div class="trade-section1">
          <div class="trade-section1-left">
            <div class="change-btns" style="margin-top: 0;">
              <div class="change-btns-item" style="width: 125px;" :class="{'change-btns-selected': tradeBtnIndex === 1}" @click="tradeBtnChange(1)">交易额</div>
              <div class="change-btns-item" style="width: 125px;" :class="{'change-btns-selected': tradeBtnIndex === 2}" @click="tradeBtnChange(2)">交易量</div>
            </div>
            <div id="trade-line" style="width: 100%;height: 140px;"></div>
          </div>
          <div class="trade-section1-right">
            <div class="right-title">商品价格</div>
            <div class="right-list-title">
              <div class="right-list-title-item">商品名称</div>
              <div class="right-list-title-item">价格（元/kg）</div>
            </div>
            <div class="right-list">
              <vue-seamless-scroll
                  :data="tradeGoodsList"
                  class="seamless-warp"
                  :class-option="classOption4">
                <div class="right-list-item" v-for="(item, index) in tradeGoodsList" :key="index">
                  <div class="right-list-item-item">{{ item.goods }}</div>
                  <div class="right-list-item-item">{{ item.price }}</div>
                </div>
              </vue-seamless-scroll>
            </div>
          </div>
        </div>
        <div class="section-sub-title" style="margin-top: 10px;">
          实时交易信息
        </div>
        <div class="trade-section2">
          <div class="trade-time">交易时间：2022-06-03  12:00</div>
          <div class="trade-goods-name">白菜</div>
          <div class="trade-goods-info">
            <div class="info-item">
              经营户：<span>张三</span>
            </div>
            <div class="info-item">
              重量：<span>100kg</span>
            </div>
            <div class="info-item">
              交易额：<span>4元</span>
          </div>

          </div>
        </div>
        <div class="trade-section3">
          精准致富累计成交<span>100000元</span>，重量<span>300吨</span> <br>
          帮扶村社：<span>12个</span> <br>
          特色产品成交额：<span>100000元</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import * as echarts from 'echarts'

export default {
  name: 'Home',
  components: {
  },
  data () {
    return {
      zzjgBtnIndex: 1,
      zzjgListData: [
        {name: '张磊', job: '理事', work: '蔬菜协会会长'},
        {name: '李璇', job: '成员', work: '蔬菜区经营户'},
        {name: '胡意旋', job: '成员', work: '蔬菜区经营户'},
        {name: '方旭', job: '成员', work: '蔬菜区经营户'},
        {name: '刘浩然', job: '成员', work: '蔬菜区经营户'},
      ],
      marketSafeBtnIndex: 1,
      sczlBtnIndex: 1,
      ajblLinesOptions: {
        legend: {
          textStyle: {
            color: '#FFFFFF',
            padding: [0,-5,0,-5],
          },
          left: 'right',
          lineStyle: {
            width: 0
          }
        },
        xAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          data: ['2020年1-4月', '2021年1-4月', '2022年1-4月']
        },
        yAxis: {
          name: '%',
          nameTextStyle: {
            color: '#FFFFFF',
            padding: [-5,25,-5,0]
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3020)',
              type: 'dashed'
            }
          }
        },
        grid: {
          top: 25,
          left: 25,
          right: 10,
          bottom: 20
        },
        series: [
          {
            name: '蔬菜',
            type: 'line',
            lineStyle: {
              color: '#44A5FF',
              width: 2
            },
            symbol: 'circle',
            smooth: true,
            symbolSize: 6,
            itemStyle: {
              color: '#44A5FF'
            },
            data: [4, 12, 10]
          },
          {
            name: '副食',
            type: 'line',
            lineStyle: {
              color: '#90C369',
              width: 2
            },
            symbol: 'circle',
            smooth: true,
            symbolSize: 6,
            itemStyle: {
              color: '#90C369'
            },
            data: [6, 14, 12]
          },
          {
            name: '水产',
            type: 'line',
            lineStyle: {
              color: '#F1C44F',
              width: 2
            },
            symbol: 'circle',
            smooth: true,
            symbolSize: 6,
            itemStyle: {
              color: '#F1C44F'
            },
            data: [10, 16, 14]
          },
          {
            name: '冷库',
            type: 'line',
            lineStyle: {
              color: '#DC655D',
              width: 2
            },
            symbol: 'circle',
            smooth: true,
            symbolSize: 6,
            itemStyle: {
              color: '#DC655D'
            },
            data: [12, 18, 16]
          },
          {
            name: '水果',
            type: 'line',
            lineStyle: {
              color: '#78B5D9',
              width: 2
            },
            symbol: 'circle',
            smooth: true,
            symbolSize: 6,
            itemStyle: {
              color: '#78B5D9'
            },
            data: [14, 20, 18]
          }
        ]
      },
      aiBtnIndex: 1,
      aiPieOptions: {
        series: [
          {
            name: 'AI预警',
            type: 'pie',
            center: ['50%', '50%'],
            // radius: []
            itemStyle: {
              borderWidth: 4,
              borderColor: 'rgba(33, 66, 91, 1)'
            },
            label: {
              color: '#00F6FF',
              fontSize: 14,
              formatter: params => {
                return params.name + '：' + params.value
              },
              overflow: 'break'
            },
            labelLine: {
              length2: 0
            },
            data: [
              {
                name: '预警',
                value: 30,
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                      offset: 0, color: '#08A4FF' // 0% 处的颜色
                    }, {
                      offset: 1, color: 'rgba(8, 154, 239, 0.2824)' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                  }
                }
              },
              {
                name: '处理',
                value: 20,
                itemStyle: {
                  color: '#00F6FF'
                }
              }
            ]
          }
        ]
      },
      carListData: [
        {carCard: '新B 73110', carType: '轻卡', from: '山东省-潍坊市', name: '张博庭', tel: '17194052491', goods: '卷心菜、冬瓜', enterTime: '2022/7/5 12:00:00', leaveTime: '未出场'},
        {carCard: '苏N PN397', carType: '微卡', from: '浙江省-杭州市', name: '袁丽燕', tel: '18671083871', goods: '紫角叶', enterTime: '2022/7/6 15:00', leaveTime: '2022/7/7 15:00'},
        {carCard: '粤E M88B6', carType: '中卡', from: '浙江省-金华市', name: '朱柏平', tel: '13404022321', goods: '西兰花、南瓜', enterTime: '2022/7/7 8:00', leaveTime: '2022/7/9 12:00'},
        {carCard: '浙K 8307C', carType: '重卡', from: '安徽省-黄山市', name: '赵梦珍', tel: '18214557999', goods: '空心菜', enterTime: '2022/7/8 10:00', leaveTime: '2022/7/8 12:00'},
        {carCard: '黑H H9978', carType: '微卡', from: '福建省-泉州市', name: '岳腾', tel: '18338183905', goods: '生瓜', enterTime: '2022/7/8 11:00', leaveTime: '2022/7/8 14:00'},
      ],
      goodsListData: [
        {goods: '白菜', kinds: '蔬菜', NO: '22070512', item: '二氧化硫', result: '合格', operator: '天天批发', supTime: '2022/7/1 15:00', checkTime: '2022/7/7 15:00', isDeal: '无须处置'},
        {goods: '鲫鱼', kinds: '水产', NO: '22062388', item: '肉类水分', result: '不合格', operator: '安心蔬菜', supTime: '2022/7/1 15:00', checkTime: '2022/7/7 15:00', isDeal: '复检合格'},
        {goods: '鲤鱼', kinds: '水果', NO: '22050602', item: '肉类水分', result: '不合格', operator: '天天批发', supTime: '2022/7/2 15:00', checkTime: '2022/7/8 15:00', isDeal: '转立案程序'},
        {goods: '辣椒', kinds: '蔬菜', NO: '22062533', item: '亚硝酸盐', result: '不合格', operator: '天天批发', supTime: '2022/7/3 15:00', checkTime: '2022/7/9 15:00', isDeal: '转立案程序'},
        {goods: '韭菜', kinds: '蔬菜', NO: '22070116', item: '农药残留', result: '不合格', operator: '安心蔬菜', supTime: '2022/7/4 15:00', checkTime: '2022/7/10 15:00', isDeal: '监督销毁及无害化处理'},
      ],
      xfListData: [
        {area: '蔬菜区', position: '门口', sb: '报警装置', message: '已过保质期', time: '2022/7/5 10:13', methods: '已处理'},
        {area: '建材区', position: '门口', sb: '消防栓', message: '设备故障', time: '2022/7/5 15:32', methods: '已处理'},
        {area: '生鲜区', position: '门口', sb: '灭火器', message: '设备故障', time: '2022/7/4 18:31', methods: '已处理'},
        {area: '水产区', position: '门口', sb: '灭火器', message: '设备故障', time: '2022/7/4 12:55', methods: '已处理'},
        {area: '蔬菜区', position: '门口', sb: '灭火器', message: '设备故障', time: '2022/7/4 18:53', methods: '已处理'},
      ],
      aiListData: [
        {operator: '王颖批发', wg: '卫生状况差', time: '2022/7/5 10:13:00', result: '已处理', dealTime: '2022/7/5 10:13', url: require('../assets/images/temp/temp_market1.jpeg')},
        {operator: '水产批发', wg: '占道经营', time: '2022/7/5 15:32:00', result: '已处理', dealTime: '2022/7/5 15:32', url: require('../assets/images/temp/temp_market2.jpeg')},
        {operator: '福宝蔬菜批发', wg: '未佩戴口罩', time: '2022/7/4 18:31:00', result: '已处理', dealTime: '2022/7/4 18:31', url: require('../assets/images/temp/temp_market1.jpeg')},
        {operator: '安心蔬菜', wg: '车辆违规停放', time: '2022/7/4 12:55:00', result: '已处理', dealTime: '2022/7/4 12:55', url: require('../assets/images/temp/temp_market2.jpeg')},
        {operator: '鹏程伟业', wg: '车辆违规停放', time: '2022/7/4 18:53:00', result: '已处理', dealTime: '2022/7/4 18:53', url: require('../assets/images/temp/temp_market1.jpeg')},
      ],
      tradeBtnIndex: 1,
      tradeLineOptions: {
        xAxis: {
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#FFFFFF'
          },
          data: ['08/08', '08/11', '08/15']
        },
        yAxis: {
          axisTick: {
            show: false
          },
          splitNumber: 4,
          axisLabel: {
            color: '#FFFFFF'
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3020)',
              type: 'dashed'
            }
          }
        },
        grid: {
          top: 15,
          left: 25,
          right: 10,
          bottom: 20
        },
        series: [
          {
            name: '交易额',
            type: 'line',
            lineStyle: {
              color: '#1AF1FF',
              width: 2
            },
            symbol: 'circle',
            smooth: true,
            symbolSize: 6,
            itemStyle: {
              color: '#1AF1FF'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(0, 239, 255, 0.3020)' // 0% 处的颜色
                }, {
                  offset: 1, color: 'rgba(0, 239, 255, 0.0510)' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            data: [50, 72, 70]
          }
        ]
      },
      tradeGoodsList: [
        {goods: '白菜', price: 3.2},
        {goods: '土豆', price: 3.2},
        {goods: '芹菜', price: 3.2},
        {goods: '油菜', price: 3.2},
        {goods: '西蓝花', price: 3.2},
      ]
    }
  },
  computed: {
    // 公告滚动自定义
    classOption() {
      return {
        step: 2, // 数值越大速度滚动越快
        limitMoveNum: 2, // 开始无缝滚动的数据量 this.cityData.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 43, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 3000, // 单步运动停止的时间(默认值1000ms)
      }
    },
    classOption1() {
      return {
        step: 20, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.cityData.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 500, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
      }
    },
    classOption2() {
      return {
        step: 20, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.cityData.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 500, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
      }
    },
    classOption3() {
      return {
        step: 20, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.cityData.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 500, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
      }
    },
    classOption4() {
      return {
        step: 2, // 数值越大速度滚动越快
        limitMoveNum: 1, // 开始无缝滚动的数据量 this.cityData.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 40, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 5000, // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  mounted() {
    this.initAqzsRadar()
    this.initFzzsRadar()
    this.initGfzsRadar()
    // this.initAjblLines()
    this.initAiPie()
    this.initTradeLine()
  },
  methods: {
    zzjgChange (index) {
      this.zzjgBtnIndex = index
      if (index === 1) {
        this.zzjgListData = [
          {name: '张磊', job: '理事', work: '蔬菜协会会长'},
          {name: '李璇', job: '成员', work: '蔬菜区经营户'},
          {name: '胡意旋', job: '成员', work: '蔬菜区经营户'},
          {name: '方旭', job: '成员', work: '蔬菜区经营户'},
          {name: '刘浩然', job: '成员', work: '蔬菜区经营户'},
        ]
      } else if (index === 2) {
        this.zzjgListData = [
          {name: '郑凡巧', job: '理事', work: '蔬菜协会会长'},
          {name: '钱默青', job: '成员', work: '蔬菜区经营户'},
          {name: '王墨玉', job: '成员', work: '蔬菜区经营户'},
          {name: '李易文', job: '成员', work: '蔬菜区经营户'},
          {name: '王智宇', job: '成员', work: '蔬菜区经营户'},
        ]
      } else if (index === 3) {
        this.zzjgListData = [
          {name: '温雪', job: '理事', work: '蔬菜协会会长'},
          {name: '黄和旭', job: '成员', work: '蔬菜区经营户'},
          {name: '吴伟才', job: '成员', work: '蔬菜区经营户'},
          {name: '吴惊云', job: '成员', work: '蔬菜区经营户'},
          {name: '宋安宜', job: '成员', work: '蔬菜区经营户'},
        ]
      } else if (index === 4) {
        this.zzjgListData = [
          {name: '李自明', job: '理事', work: '蔬菜协会会长'},
          {name: '宋寒墨', job: '成员', work: '蔬菜区经营户'},
          {name: '王凌凡', job: '成员', work: '蔬菜区经营户'},
          {name: '周天云', job: '成员', work: '蔬菜区经营户'},
          {name: '钱和昶', job: '成员', work: '蔬菜区经营户'},
        ]
      }
    },
    marketSafeBtnChange (index) {
      this.marketSafeBtnIndex = index
    },
    sczlChange (index) {
      this.sczlBtnIndex = index
      if (index === 3) {
        this.ajblLinesOptions = {
          legend: {
            textStyle: {
              color: '#FFFFFF',
              padding: [0,-5,0,-5],
            },
            left: 'right',
            lineStyle: {
              width: 0
            }
          },
          xAxis: {
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF'
            },
            data: ['2020年(1-4月总报警数)', '2021年(1-4月总报警数)', '2022年(1-4月总报警数)']
          },
          yAxis: {
            name: '%',
            nameTextStyle: {
              color: '#FFFFFF',
              padding: [-5,25,-5,0]
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.3020)',
                type: 'dashed'
              }
            }
          },
          grid: {
            top: 25,
            left: 25,
            right: 10,
            bottom: 20
          },
          series: [
            {
              name: '纠纷调解',
              type: 'line',
              lineStyle: {
                color: '#44A5FF',
                width: 2
              },
              symbol: 'circle',
              smooth: true,
              symbolSize: 6,
              itemStyle: {
                color: '#44A5FF'
              },
              data: [55, 50, 18]
            },
            {
              name: '治安事件',
              type: 'line',
              lineStyle: {
                color: '#F1C44F',
                width: 2
              },
              symbol: 'circle',
              smooth: true,
              symbolSize: 6,
              itemStyle: {
                color: '#F1C44F'
              },
              data: [75, 70, 38]
            }
          ]
        }
        setTimeout(() => {
          this.initAjblLines(true)
        },0)
      } else if (index === 2) {
        this.ajblLinesOptions = {
          legend: {
            textStyle: {
              color: '#FFFFFF',
              padding: [0,-5,0,-5],
            },
            left: 'right',
            lineStyle: {
              width: 0
            }
          },
          xAxis: {
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF'
            },
            data: ['2020年1-4月', '2021年1-4月', '2022年1-4月']
          },
          yAxis: {
            name: '%',
            nameTextStyle: {
              color: '#FFFFFF',
              padding: [-5,25,-5,0]
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.3020)',
                type: 'dashed'
              }
            }
          },
          grid: {
            top: 25,
            left: 25,
            right: 10,
            bottom: 20
          },
          series: [
            {
              name: '蔬菜',
              type: 'line',
              lineStyle: {
                color: '#44A5FF',
                width: 2
              },
              symbol: 'circle',
              smooth: true,
              symbolSize: 6,
              itemStyle: {
                color: '#44A5FF'
              },
              data: [4, 12, 10]
            },
            {
              name: '副食',
              type: 'line',
              lineStyle: {
                color: '#90C369',
                width: 2
              },
              symbol: 'circle',
              smooth: true,
              symbolSize: 6,
              itemStyle: {
                color: '#90C369'
              },
              data: [6, 14, 12]
            },
            {
              name: '水产',
              type: 'line',
              lineStyle: {
                color: '#F1C44F',
                width: 2
              },
              symbol: 'circle',
              smooth: true,
              symbolSize: 6,
              itemStyle: {
                color: '#F1C44F'
              },
              data: [10, 16, 14]
            },
            {
              name: '冷库',
              type: 'line',
              lineStyle: {
                color: '#DC655D',
                width: 2
              },
              symbol: 'circle',
              smooth: true,
              symbolSize: 6,
              itemStyle: {
                color: '#DC655D'
              },
              data: [12, 18, 16]
            },
            {
              name: '水果',
              type: 'line',
              lineStyle: {
                color: '#78B5D9',
                width: 2
              },
              symbol: 'circle',
              smooth: true,
              symbolSize: 6,
              itemStyle: {
                color: '#78B5D9'
              },
              data: [14, 20, 18]
            }
          ]
        }
        setTimeout(() => {
          this.initAjblLines(true)
        },0)
      } else if (index === 4) {
        this.ajblLinesOptions = {
          legend: {
            textStyle: {
              color: '#FFFFFF',
              padding: [0,-5,0,-5],
            },
            left: 'right',
            lineStyle: {
              width: 0
            }
          },
          xAxis: {
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF'
            },
            data: ['2月', '3月', '4月']
          },
          yAxis: {
            name: '%',
            nameTextStyle: {
              color: '#FFFFFF',
              padding: [-5,25,-5,0]
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.3020)',
                type: 'dashed'
              }
            }
          },
          grid: {
            top: 25,
            left: 25,
            right: 10,
            bottom: 20
          },
          series: [
            {
              name: '法律培训',
              type: 'line',
              lineStyle: {
                color: '#44A5FF',
                width: 2
              },
              symbol: 'circle',
              smooth: true,
              symbolSize: 6,
              itemStyle: {
                color: '#44A5FF'
              },
              data: [18, 35, 30]
            }
          ]
        }
        setTimeout(() => {
          this.initAjblLines(true)
        },0)
      }
    },
    aiBtnChange (index) {
      this.aiBtnIndex = index
      if (index === 1) {
        // setTimeout(() => {
        // },0)
      }
    },
    tradeBtnChange (index) {
      this.tradeBtnIndex = index
      if (index === 1) {
        this.tradeLineOptions = {
          xAxis: {
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF'
            },
            data: ['08/08', '08/11', '08/15']
          },
          yAxis: {
            axisTick: {
              show: false
            },
            splitNumber: 4,
            axisLabel: {
              color: '#FFFFFF'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.3020)',
                type: 'dashed'
              }
            }
          },
          grid: {
            top: 15,
            left: 25,
            right: 10,
            bottom: 20
          },
          series: [
            {
              name: '交易额',
              type: 'line',
              lineStyle: {
                color: '#1AF1FF',
                width: 2
              },
              symbol: 'circle',
              smooth: true,
              symbolSize: 6,
              itemStyle: {
                color: '#1AF1FF'
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(0, 239, 255, 0.3020)' // 0% 处的颜色
                  }, {
                    offset: 1, color: 'rgba(0, 239, 255, 0.0510)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
              data: [50, 72, 70]
            }
          ]
        }
        setTimeout(() => {
          this.initTradeLine(true)
        },0)
      } else if (index === 2) {
        this.tradeLineOptions = {
          xAxis: {
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#FFFFFF'
            },
            data: ['08/08', '08/11', '08/15']
          },
          yAxis: {
            axisTick: {
              show: false
            },
            splitNumber: 4,
            axisLabel: {
              color: '#FFFFFF'
            },
            splitLine: {
              lineStyle: {
                color: 'rgba(255,255,255,0.3020)',
                type: 'dashed'
              }
            }
          },
          grid: {
            top: 15,
            left: 25,
            right: 10,
            bottom: 20
          },
          series: [
            {
              name: '交易额',
              type: 'line',
              lineStyle: {
                color: '#00FFAF',
                width: 2
              },
              symbol: 'circle',
              smooth: true,
              symbolSize: 6,
              itemStyle: {
                color: '#00FFAF'
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [{
                    offset: 0, color: 'rgba(0, 255, 175, 0.3020)' // 0% 处的颜色
                  }, {
                    offset: 1, color: 'rgba(0, 255, 175, 0.0510)' // 100% 处的颜色
                  }],
                  global: false // 缺省为 false
                }
              },
              data: [20, 70, 40]
            }
          ]
        }
        setTimeout(() => {
          this.initTradeLine(true)
        },0)
      }
    },
    initAqzsRadar () {
      let aqzs = echarts.init(document.getElementById('aqzs-radar'))
      let option = {
        tooltip: {
          show: true,
          confine: true
        },
        title: {
          text: '99',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 39
          },
          left: 'center',
          top: '42%'
        },
        radar: {
          radius: '60%',
          center: ['50%', '50%'],
          indicator: [
            {name: '疫情防控', max: 100},
            {name: '食品安全', max: 100},
            {name: '消防安全', max: 100},
          ],
          shape: 'polygon',
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisName: {
            color: '#FFFFFF',
            fontSize: 14,
            padding: [5,-15,5,-15]
          },
          splitArea: {
            areaStyle: {
              color: 'transparent'
            }
          }
        },
        series: [
          {
            name: '安全指数',
            type: 'radar',
            symbol: 'circle',
            itemStyle: {
              color: '#19ECFF'
            },
            symbolSize: 5,
            lineStyle: {
              color: '#6EE9FC',
              width: 2
            },
            areaStyle: {
              color: 'rgba(25, 236, 255, 0.2000)'
            },
            label: {
              show: true,
              color: '#00F6FF',
              fontSize: 16
            },
            data: [
              [87, 90 ,78]
            ]
          }
        ]
      }
      aqzs.setOption(option)
    },
    initFzzsRadar () {
      let fzzs = echarts.init(document.getElementById('fzzs-radar'))
      let option = {
        tooltip: {
          show: true,
          confine: true
        },
        title: {
          text: '99',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 39
          },
          left: 'center',
          top: '45%'
        },
        radar: {
          radius: '55%',
          center: ['50%', '50%'],
          indicator: [
            {name: '创新发展', max: 100},
            {name: '活力发展', max: 100},
            {name: '规模发展', max: 100},
            {name: '辐射发展', max: 100},
          ],
          shape: 'polygon',
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisName: {
            color: '#FFFFFF',
            fontSize: 14,
            padding: [10,-15,10,-15]
          },
          splitArea: {
            areaStyle: {
              color: 'transparent'
            }
          }
        },
        series: [
          {
            name: '发展指数',
            type: 'radar',
            symbol: 'circle',
            itemStyle: {
              color: '#19ECFF'
            },
            symbolSize: 5,
            lineStyle: {
              color: '#6EE9FC',
              width: 2
            },
            areaStyle: {
              color: 'rgba(25, 236, 255, 0.2000)'
            },
            label: {
              show: true,
              color: '#00F6FF',
              fontSize: 16
            },
            data: [
              [90, 90 ,69, 67]
            ]
          }
        ]
      }
      fzzs.setOption(option)
    },
    initGfzsRadar () {
      let gfzs = echarts.init(document.getElementById('gfzs-radar'))
      let option = {
        tooltip: {
          show: true,
          trigger: 'item',
          confine: true
        },
        title: {
          text: '99',
          textStyle: {
            color: '#FFFFFF',
            fontSize: 39
          },
          left: 'center',
          top: '45%'
        },
        radar: {
          radius: '55%',
          center: ['50%', '50%'],
          indicator: [
            {name: '特色助力', max: 100},
            {name: '', max: 100},
            {name: '社会贡献', max: 100},
            {name: '', max: 100},
          ],
          shape: 'polygon',
          splitNumber: 4,
          splitLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisName: {
            color: '#FFFFFF',
            fontSize: 14,
            padding: [10,-15,10,-15]
          },
          splitArea: {
            areaStyle: {
              color: 'transparent'
            }
          }
        },
        series: [
          {
            name: '共富指数',
            type: 'radar',
            symbol: 'circle',
            itemStyle: {
              color: '#19ECFF'
            },
            symbolSize: 5,
            lineStyle: {
              color: '#6EE9FC',
              width: 2
            },
            areaStyle: {
              color: 'rgba(25, 236, 255, 0.2000)'
            },
            label: {
              show: true,
              color: '#00F6FF',
              fontSize: 16
            },
            data: [
              [89, , 78, ]
            ]
          }
        ]
      }
      gfzs.setOption(option)
    },
    initAjblLines (clear) {
      if (clear) {
        echarts.init(document.getElementById('ajbl-line')).clear()
      }
      echarts.init(document.getElementById('ajbl-line')).setOption(this.ajblLinesOptions)
    },
    initAiPie () {
      echarts.init(document.getElementById('ai-pie')).setOption(this.aiPieOptions)
    },
    initTradeLine (clear) {
      if (clear) {
        echarts.init(document.getElementById('trade-line')).clear()
      }
      echarts.init(document.getElementById('trade-line')).setOption(this.tradeLineOptions)
    },
    nextPage (route) {
      this.$router.push(route)
    }
  }
}
</script>
<style lang="less" scoped>
@import "../assets/style/index.css";
</style>
